import { Text, View } from "./Themed";
import React from "react";
import { Appbar, BottomNavigation } from "react-native-paper";
import createDayjs from "../utils/datetime";
import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
import { HeaderEnums } from "../types";
import { StyleSheet } from "react-native";
import vars from "../styles/vars";

interface RootHeader {
  visiable: boolean;
  route?: string;
  navigation?: any;
}

export default function Header(header: RootHeader) {
  const { visiable, route, navigation } = header;
  if (visiable) {
    if (route === HeaderEnums.HOME) return <HomeHeader />;
    if (route === HeaderEnums.HOME_MODAL) return <HomeModal nav={navigation.goBack} />;
    if (route === HeaderEnums.CALENDAR) return <CalendarHeader />;
    if (route === HeaderEnums.TAB) return <TabHeader />;
    return <NotFound />;
  }
  return <Blank />;
}

function NotFound() {
  return <Text>404</Text>;
}

function Blank() {
  return <></>;
}

function HomeHeader() {
  const Searchbar = () => {
    return <AntDesign name="search1" size={24} />;
  };
  const MoreBar = () => {
    return <Feather name="more-vertical" size={24} />;
  };
  return (
    <Appbar.Header theme={{ colors: { primary: "#fff" } }}>
      <AntDesign name={"profile"} size={24} />
      <Appbar.Content title="日常账本" titleStyle={{ fontSize: 18, fontWeight: "400" }} />
      <Appbar.Action icon={Searchbar} />
      <Appbar.Action icon={MoreBar} />
    </Appbar.Header>
  );
}

interface HomeModalProps {
  nav: () => void;
}

function HomeModal(props: HomeModalProps) {
  const { nav } = props;
  return (
    <View style={styles.modal}>
      <View style={styles.modalLeft}>
        <AntDesign name={"left"} size={20} onPress={nav} />
        <Text style={styles.modalLeftTitle}>预算管理</Text>
      </View>
      <View style={styles.modalRight}>
        <Text style={styles.modalRightText}>{createDayjs().format("YYYY年M月")}</Text>
        <Feather name={"more-vertical"} size={24} />
      </View>
    </View>
  );
}

function CalendarHeader() {
  const current = createDayjs().format("YYYY年M月");
  const Redenvelopes = () => <AntDesign name="redenvelopes" size={24} />;
  const Plus = () => <MaterialCommunityIcons name={"text-box-plus"} size={24} />;
  return (
    <Appbar.Header theme={{ colors: { primary: "#fff" } }}>
      <Appbar.Content title={current} />
      <Appbar.Action icon={Redenvelopes} />
      <Appbar.Action icon={Plus} />
    </Appbar.Header>
  );
}

function TabHeader() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: "day", title: "日常" },
    { key: "month", title: "月统计" },
    { key: "year", title: "年统计" },
    { key: "custom", title: "自定义" },
  ]);
  const DayRoute = () => <Text>1</Text>;
  const MonthRoute = () => <Text>2</Text>;
  const YearRoute = () => <Text>3</Text>;
  const CustomRoute = () => <Text>4</Text>;
  const renderScence = BottomNavigation.SceneMap({
    day: DayRoute,
    month: MonthRoute,
    year: YearRoute,
    custom: CustomRoute,
  });
  return (
    <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScence}
    />
  );
}

const styles = StyleSheet.create({
  modal: {
    display: "flex",
    flexDirection: "row",
    height: 48,
    paddingLeft: 15,
    paddingRight: 15,
  },
  modalLeft: {
    flex: 1,
    justifyContent: "flex-start",
    alignSelf: "center",
    alignItems: "center",
    flexDirection: "row",
  },
  modalLeftTitle: {
    marginLeft: 10,
    color: vars["dark-2"],
    fontSize: 18,
  },

  modalRight: {
    flex: 1,
    justifyContent: "flex-end",
    alignSelf: "center",
    alignItems: "center",
    flexDirection: "row",
  },
  modalRightText: {
    marginRight: 10,
    fontSize: 16,
    color: vars["dark-1"],
  },
});
